import React, {PureComponent} from "react"
import {Form, Icon as LegacyIcon} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {ArrowLeftOutlined, EnvironmentOutlined} from '@ant-design/icons';
import {
  Alert,
  Breadcrumb,
  Button,
  Cascader,
  Drawer,
  Input,
  PageHeader,
  Spin,
  Upload,
  AutoComplete,
} from "antd";
import firstShopCompose from "./compose"
import {withRouter} from "react-router"
import ToolTipsInput from "libs/tooltips-input"
import "./index.less"
import {formItemLayout} from "./layout"
import area, {areaFilter} from "libs/area"
import {Link} from "react-router-dom"
import {defaultSize, HOST, regex_id_card} from "project-config"
import {rootPath} from "../../../../shared/init"
import SearchAutoComplete from "libs/search-auto-complete"

const form = Form.create()
const inputSize = 'default'
const Option = AutoComplete.Option

const addressRender = (d, idx) => {
  return <Option key={`${idx}`} text={d.name}>
    <span>{d.name}<span className={'sub-text'}>{d.address}</span></span>
  </Option>
}


export default @withRouter
@form
@firstShopCompose
class AppendShop extends PureComponent {

  render() {

    const {
      _initData
      , onShopNameChange
      , _submitting
      , onSubmit
      , _serverMessage
      , licensePicture
      , idCardPicture
      , idCardPictureUploading
      , licensePictureUploading
      , onIdCardChange
      , onLicenseChange
      , mode
      , mapVisible
      , showMap
      , closeMap
      , searchAddress
      , addressSource
      , selectAddress
      , locationData
    } = this.props
    const {getFieldDecorator} = this.props.form

    const uploadButton = (text, loading) => (
      <div>
        {loading ? <Spin/> : <LegacyIcon type={'cloud-upload'}/>}
        <div className="ant-upload-text">{text || '上传营业执照'}</div>
      </div>
    )

    return (
      <div className={'zr-panel'}>

        <div className={'zr-panel-header'}>
          <div>
            {/*<Breadcrumb>*/}
            {/*	<Breadcrumb.Item><Link to={'/app/home'}>首页</Link></Breadcrumb.Item>*/}
            {/*	<Breadcrumb.Item><Link to="/app/my-shop">我的门店</Link></Breadcrumb.Item>*/}
            {/*	<Breadcrumb.Item>创建</Breadcrumb.Item>*/}
            {/*</Breadcrumb>*/}
            <PageHeader backIcon={<ArrowLeftOutlined/>}
                        onBack={() => window.history.back()} title={`${mode === 'edit' ? '编辑' : '创建'}门店`}
                        subTitle={`${mode === 'edit' ? '编辑' : '创建'}门店`}/>
          </div>
        </div>

        <div className={'my-shop-form zr-tooltip-container'}>
          <Drawer
            className={'map-container'}
            //getContainer={() => document.getElementById('zr-app-container')}
            title={<div>
              <div>
                <EnvironmentOutlined className={'title-icon'}/>
                <span>从地图中定位</span>
                <span className={'location-point'}>[{locationData.lng || 0},{locationData.lat || 0}]</span>
              </div>
              <div className={'map-location-text'}>
                {locationData.address || '请搜索或选择地址'}
              </div>
            </div>}
            placement="right"
            onClose={closeMap}
            closable={true}
            visible={mapVisible}
            width={600}
          >
            <div className={'map-location-input'}>
              <SearchAutoComplete
                optionLabelProp={'text'}
                optionRender={addressRender}
                dataSource={addressSource}
                onSubmit={searchAddress}
                onSelect={selectAddress}
                placeholder={'输入地名查找'}/>
            </div>
            <div id={'my-shop-map'}>
              <div id='map-loading'>
                <div>
                  <Spin/>
                </div>
                <h4>正在加载地图...</h4>
              </div>
            </div>
          </Drawer>

          <div>
            <div className={'zr-title-h1'} style={{
              textAlign: 'center', fontSize: '24px',
              marginBottom: '20px',
              marginTop: '10px',
              marginLeft: '100px'
            }}>
              {mode === 'edit' ? '编辑' : '填写'}您的门店信息
            </div>
            {
              !_serverMessage
                ? undefined
                : <Alert message={_serverMessage} type="error" showIcon className={'first-shop-message'}/>
            }
            <Form className="shop-form">

              {/*商户名称*/}

              <Form.Item label={'门店名称'} {...formItemLayout}>
                {getFieldDecorator('shopName', {
                  initialValue: _initData.shopName,
                  rules: [
                    {required: true, message: '请输入商户名称'},
                    {pattern: /^.{2,20}$/, message: '名称只能2-20个字符'},],
                })(
                  <ToolTipsInput size={inputSize}
                                 onChange={onShopNameChange}
                                 title={'4-20位字符,推荐使用汉字,例如:蓝迪智能裁缝'}
                                 placeholder="请输入商户名称"/>
                )}
              </Form.Item>

              {/*主页地址*/}

              <Form.Item label={'主页地址'} {...formItemLayout}>
                {getFieldDecorator('homePage', {
                  initialValue: _initData['homePage'],
                  rules: [{required: true, message: '请输入商户主页访问地址'},
                    {pattern: /^[\da-zA-Z\-]{2,20}$/, message: '只能使用2-20位字母、数字、-'}],
                })(
                  <ToolTipsInput size={inputSize}
                                 suffix={'.ld006.com'}
                                 addonBefore="http://"
                    // addonAfter={".ld006.com/"}
                                 title={'2-20位字母数字或-,建议使用店名拼音或便于记录的组合,例如:ld006'}
                                 placeholder='请输入商户主页'/>
                )}
              </Form.Item>

              {/*店主姓名*/}

              <Form.Item label={'店主姓名'} {...formItemLayout}>
                {getFieldDecorator('ownerName', {
                  initialValue: _initData['ownerName'],
                  rules: [{required: true, message: '请输入店主姓名'}],
                })(
                  <ToolTipsInput size={inputSize}
                                 title={'店主姓名,2-4位汉字,例如：张三'}
                                 placeholder='请输入店主姓名'/>
                )}
              </Form.Item>


              {/*店主姓名*/}

              <Form.Item label={'店主身份证号'} {...formItemLayout}>
                {getFieldDecorator('idCardNo', {
                  initialValue: _initData['idCardNo'],
                  rules: [
                    {required: true, message: '请输入店主身份证号'},
                    {pattern: regex_id_card, message: '请输入有效的18位身份证号'}
                  ],
                })(
                  <ToolTipsInput size={inputSize}
                                 title={'店主18位身份证号'}
                                 placeholder='请输入店主身份证号'/>
                )}
              </Form.Item>


              <div>
                {/*地址*/}

                <Form.Item label={'所在地区'} {...formItemLayout}>
                  {getFieldDecorator('area', {
                    initialValue: _initData['area'],
                    rules: [{required: true, message: '请选择地址所在省、市、区、县'}],
                  })(
                    <Cascader size={inputSize}
                              options={area}
                              showSearch={areaFilter}
                              placeholder='请输入并选择地址所在省、市、区、县'/>
                  )}
                </Form.Item>

                {/*详细地址*/}

                <Form.Item label={'详细地址'} {...formItemLayout}>
                  {getFieldDecorator('address', {
                    value: _initData['address'],
                    rules: [{required: true, message: '请输入详细地地址、街道'}],
                  })(
                    <ToolTipsInput size={inputSize}
                                   suffix={<EnvironmentOutlined onClick={showMap} className={'map-location'}/>}
                                   title={'请输入详细地地址,街道,例如：xxx路xx号'}
                                   placeholder='请输入详细地地址'/>
                  )}
                </Form.Item>

                {/*主要电话*/}

                <Form.Item label={'门店电话'} {...formItemLayout}>
                  {getFieldDecorator('primaryPhone', {
                    initialValue: _initData['primaryPhone'],
                    rules: [{required: true, message: '请输入门店电话'},
                      {
                        pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$|^\d{3,5}\-?\d{7,8}$/,
                        message: '电话号码格式不正确'
                      }
                    ],
                  })(
                    <ToolTipsInput size={inputSize}
                                   title={'门店电话,国内手机或座机,座机区号使用-分隔,如：13312344321或028-12345678'}
                                   placeholder='请输入手机号码名固定电话号码'/>
                  )}
                </Form.Item>


                <Form.Item label={'营业执照'} {...formItemLayout}>
                  {getFieldDecorator('licensePictureId', {
                    initialValue: _initData['licensePictureId'],
                    rules: [{required: true, message: '请上传营业执照照片'}],
                  })(
                    <Upload
                      name="file"
                      listType="picture-card"
                      className="shop-uploader"
                      withCredentials={true}
                      action={`${HOST}/myShop/images/license`}
                      showUploadList={false}
                      onChange={onLicenseChange}
                    >
                      {licensePicture && !licensePictureUploading
                        ? <img className={'upload-image'} src={licensePicture}/>
                        : uploadButton(null, licensePictureUploading)}
                    </Upload>
                  )}
                </Form.Item>

                <Form.Item label={'身份证照片'} {...formItemLayout}>
                  {getFieldDecorator('idCardPictureId', {
                    initialValue: _initData['idCardPictureId'],
                    rules: [{required: true, message: '请上传身份证照片'}],
                  })(
                    <Upload
                      name="file"
                      withCredentials={true}
                      listType="picture-card"
                      className="shop-uploader"
                      showUploadList={false}
                      action={`${HOST}/myShop/images/idCard`}
                      onChange={onIdCardChange}
                    >
                      {idCardPicture && !idCardPictureUploading
                        ? <img className={'upload-image'} src={idCardPicture}/>
                        : uploadButton("上传身份证", idCardPictureUploading)}
                    </Upload>
                  )}
                </Form.Item>

                {/*其它电话*/}
                <Form.Item label={'其它联系方式一'} {...formItemLayout}>
                  {getFieldDecorator('otherPhone', {
                    initialValue: _initData['otherPhone'],
                    rules: [{
                      pattern: /^[\d\-,;\s]{8,}$/, message: '格式不正确'
                    }],
                  })(
                    <ToolTipsInput size={inputSize}
                                   title={'国内手机或座机,座机区号使用-分隔,如：13312344321或028-12345678'}
                                   placeholder='请输入手机号码名固定电话号码'/>
                  )}
                </Form.Item>


                <Form.Item label={'其它联系方式二'} {...formItemLayout}>
                  {getFieldDecorator('otherPhone2', {
                    initialValue: _initData['otherPhone2'],
                    rules: [{
                      pattern: /^[\d\-,;\s]{8,}$/, message: '格式不正确'
                    }],
                  })(
                    <ToolTipsInput size={inputSize}
                                   title={'国内手机或座机,座机区号使用-分隔,如：13312344321或028-12345678'}
                                   placeholder='请输入手机号码名固定电话号码'/>
                  )}
                </Form.Item>


                <Form.Item label={'其它联系方式三'} {...formItemLayout}>
                  {getFieldDecorator('otherPhone3', {
                    initialValue: _initData['otherPhone3'],
                    rules: [{
                      pattern: /^[\d\-,;\s]{8,}$/, message: '格式不正确'
                    }],
                  })(
                    <ToolTipsInput size={inputSize}
                                   title={'国内手机或座机,座机区号使用-分隔,如：13312344321或028-12345678'}
                                   placeholder='请输入手机号码名固定电话号码'/>
                  )}
                </Form.Item>
              </div>


              <Form.Item label={'描述'} {...formItemLayout}>
                {getFieldDecorator('description', {
                  rules: [
                    {max: 500, message: '最多输入500个字符'},
                  ],
                  initialValue: _initData.description,
                })(
                  <Input.TextArea className={'clothing-text-area'}
                                  autosize={{minRows: 2, maxRows: 6}}
                                  rows={4} placeholder={'请输入描述（500字以内）'}/>
                )}
              </Form.Item>

              <Form.Item wrapperCol={{span: 12, offset: 8}}>
                <Button size={defaultSize}
                        onClick={() => this.props.history.push(`/${rootPath}/my-shop`)}>
                  <ArrowLeftOutlined/> 返回
                </Button>
                <div style={{display: 'inline-block', width: '20px'}}></div>
                <Button size={defaultSize}
                        type="primary"
                        htmlType="submit"
                        loading={_submitting}
                        onClick={onSubmit}
                        className="login-form-button">
                  {_submitting ? '正在提交' : <div><LegacyIcon type={'check'}/> 提交审核</div>}
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}